<template>
  <div class="settingSwitchItem" v-show="this.visible !== 'gone'">
    <div class="title" v-show="this.visible === 'visible'">
      {{ this.title }}
    </div>
    <my-switch
      class="switch"
      :checkedProps="this.isChecked"
      @change="valueChange"
    >
    </my-switch>
  </div>
</template>
<script>
import MySwitch from "../MySwitch.vue";
export default {
  components: {
    MySwitch,
  },
  props: {
    titlePro: {
      type: String,
      default: "",
    },
    isCheckedPro: {
      type: Boolean,
      default: false,
    },
    visiblePro: {
      type: String,
      default: "visible",
    },
  },
  data() {
    return {
      isChecked: false,
      title: "",
      visible: "visible",
    };
  },
  mounted() {
    this.title = this.titlePro;
    this.isChecked = this.isCheckedPro;
    this.visible = this.visiblePro;
  },
  watch: {
    titlePro(newVal) {
      this.title = newVal;
    },
    isCheckedPro(newVal) {
      this.isChecked = newVal;
    },
    visiblePro(newVal) {
      this.visible = newVal;
    },
  },
  methods: {
    valueChange(newValue) {
      this.isChecked = newValue;
      this.$emit("switchChange", this.isChecked);
    },
  },
};
</script>
<style scoped>
.settingSwitchItem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 48px;
  width: 100%;
  align-items: center;
}

.settingSwitchItem .title {
  font-size: 16px;
  color: var(--current-primary-color);
}

.settingSwitchItem .switch {
  margin-right: 0px;
}
</style>
